﻿var chart;
var chartData = [];

AmCharts.ready(function () {
    // generate some random data first
    generateChartData();

    // SERIAL CHART    
    chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "../amcharts/images/";
    chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
    };
    chart.dataProvider = chartData;
    chart.categoryField = "DateTime";

    // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
    //chart.addListener("dataUpdated", zoomChart);

    // AXES
    // category                
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 2;
    categoryAxis.gridAlpha = 0.15;
    categoryAxis.axisColor = "#DADADA";

    // first value axis (on the left)
    var valueAxis1 = new AmCharts.ValueAxis();
    valueAxis1.axisColor = "#FF6600";
    valueAxis1.axisThickness = 2;
    valueAxis1.gridAlpha = 0;
    chart.addValueAxis(valueAxis1);

    // second value axis (on the right) 
    //    var valueAxis2 = new AmCharts.ValueAxis();
    //    valueAxis2.position = "right"; // this line makes the axis to appear on the right
    //    valueAxis2.axisColor = "#FCD202";
    //    valueAxis2.gridAlpha = 0;
    //    valueAxis2.axisThickness = 2;
    //    chart.addValueAxis(valueAxis2);

    // third value axis (on the left, detached)
    //    var valueAxis3 = new AmCharts.ValueAxis();
    //    valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
    //    valueAxis3.gridAlpha = 0;
    //    valueAxis3.axisColor = "#B0DE09";
    //    valueAxis3.axisThickness = 2;
    //    chart.addValueAxis(valueAxis3);

    // GRAPHS
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph1.title = "ดอกเบี้ย";
    graph1.valueField = "Interest";
    graph1.bullet = "round";
    graph1.hideBulletsCount = 30;
    chart.addGraph(graph1);

    //second graph                
    var graph2 = new AmCharts.AmGraph();
    graph2.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph2.title = "เงินต้น";
    graph2.valueField = "PaidPrinciple";
    graph2.bullet = "square";
    graph2.hideBulletsCount = 30;
    chart.addGraph(graph2);

    //    // third graph
    var graph3 = new AmCharts.AmGraph();
    graph3.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph3.valueField = "Installment";
    graph3.title = "จ่ายต่อเดือน";
    graph3.bullet = "square";
    graph3.hideBulletsCount = 30;
    chart.addGraph(graph3);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);

    // SCROLLBAR
    var chartScrollbar = new AmCharts.ChartScrollbar();
    chart.addChartScrollbar(chartScrollbar);

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.marginLeft = 110;
    chart.addLegend(legend);

    // WRITE
    chart.write("chartdiv");

    chart.addListener("zoomed", function (data) {
        var periodStart = data.startDate;
        var periodEnd = data.endDate;
        var filterData = jQuery.grep(initialData, function (d) {
            return new Date(parseInt(d.DateTime.substr(6))) >= periodStart && new Date(parseInt(d.DateTime.substr(6))) <= periodEnd; // retain appropriate elements
        });
        viewModel.update(filterData);
        
    });
});


function generateChartData() {
    $(initialData).each(function () {
        chartData.push({
            DateTime: new Date(parseInt(this.DateTime.substr(6))),
            Interest: (this.Interest.Value).toFixed(2),
            Installment: (this.Installment.Value).toFixed(2),
            Period: this.Period,
            PaidPrinciple: (this.PaidPrinciple.Value).toFixed(2)
        });
    });
}

// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(10, 20);
}



var viewModel = {
    loanMonthlys: ko.observableArray(initialData),
    calculate: function (form) {
        //alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
        ko.utils.postJson(form, {
            Principle: parseFloat($("#txtPrinciple").val()),
            Installment: parseFloat($("#txtInstallment").val()),
            StartDate: $("#txtStartDate").val()
        });
    },
    update: function (data) {
        this.loanMonthlys.push(data[0]);
    },
    editInstallment: function (period, installment) {

        var data = {
            period: $("#edit-popup").closest("tr").attr("period"),
            installment: $("#installment").val()
        }
        $.post("/Home/EditInstallment", data, function (returnedData) {
            var newLoanMonthlys = returnedData;
        })
    }
};
//var viewModel2 = ko.mapping.fromJS(initialData);
//var viewModel = new LoanModel(initialData);

ko.applyBindings(viewModel);

